# Descriptor emergente / Tooltip

#### Código

```
<tooltip></tooltip>
```

#### Tokens

**Color de descriptor de icono**

| Class                       | Property         | Color token   |
| :-------------------------- | :--------------- | :------------ |
| `.bx--tooltip__trigger svg` | background-color | `$inverse-02` |
| `.bx--tooltip--icon`        | background-color | `$inverse-02` |
| `p`                         | text color       | `$inverse-01` |

**Color de descriptor de definici´ón**

| Class                      | Property         | Color token       |
| :------------------------- | :--------------- | :---------------- |
| `.bx--tooltip__label`      | text color       | `$text-02`        |
| `.bx--tooltip__trigger`    | border-bottom    | `$interactive-04` |
| `.bx--tooltip--definition` | background-color | `$inverse-02`     |
| `p`                        | text color       | `$inverse-01`     |

**Color de descriptor interactivo**

| Class                   | Property         | Color token   |
| :---------------------- | :--------------- | :------------ |
| `.bx--tooltip__label`   | text color       | `$text-02`    |
| `.bx--tooltip__trigger` | svg              | `$icon-01`    |
| `.bx--tooltip--shown`   | background-color | `$inverse-02` |
| `.bx--tooltip__caret`   | background-color | `$inverse-02` |
| `p`                     | text color       | `$inverse-01` |

**Tipografía**

| Property              | Type token       |
| :-------------------- | :--------------- |
| `.bx--tooltip__label` | `$label-01`      |
| `p`                   | `$body-short-01` |

**Espaciado del descriptor de icono**

| Class                                                        | Property                    | Spacing token |
| :----------------------------------------------------------- | :-------------------------- | :------------ |
| `.bx--tooltip--icon__top:before` `.bx--tooltip--icon__bottom:before` | max-width                   | –             |
| `.bx--tooltip--icon__top:before` `.bx--tooltip--icon__bottom:before` | padding-left, padding-right | `$spacing-05` |
| `.bx--tooltip--icon__top:before` `.bx--tooltip--icon__bottom:before` | padding-top, padding-bottom | `$spacing-01` |
| `.bx--tooltip__caret`                                        | margin-top                  | `$spacing-03` |

**Espaciado del descriptor de definición**

| Class                                                        | Property                    | Spacing token |
| :----------------------------------------------------------- | :-------------------------- | :------------ |
| `.bx--tooltip--definition__bottom` `.bx--tooltip--definition__top` | max-width                   | –             |
| `.bx--tooltip--definition__bottom` `.bx--tooltip--definition__top` | padding-top, padding bottom | `$spacing-03` |
| `.bx--tooltip--definition__bottom` `.bx--tooltip--definition__top` | padding-left, padding-right | `$spacing-05` |
| `.bx--tooltip__trigger`                                      | border-bottom               | –             |
| `.bx--tooltip__caret`                                        | margin-top                  | `$spacing-02` |

**Espaciado del descriptor interactivo**

| Class                       | Property      | Spacing token |
| :-------------------------- | :------------ | :------------ |
| `.bx--tooltip`              | max-width     | –             |
| `.bx--tooltip__trigger svg` | height, width | –             |
| `.bx--tooltip__trigger`     | margin-left   | `$spacing-03` |
| `.bx--tooltip--shown`       | padding       | `$spacing-05` |
| `.bx--tooltip`              | margin-top    | `$spacing-03` |